<template>
  <div>
    <div class="app-container">
      <TopInfo />
      <Search :lookup="data.lookup" @investigate="inves" />
      <div>
        <el-button v-prmis="'manager_log_exportAul'" type="primary" size="small">
          <template #default>
            <span class="text-sm" @click="getExport">{{ $t('public.export') }} Excel</span>
          </template>
        </el-button>
      </div>
    </div>
    <div class="app-container" v-loading="data.mtloading">
      <!-- 表格 -->
      <el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }" class="w-full" height="700">
        <el-table-column prop="organization_name" :label="$t('eventlog.user.organization')" />
        <el-table-column prop="nickname" :label="$t('eventlog.user.userName')" />
        <el-table-column prop="position" :label="$t('public.location')">
          <template #default="scope">
            {{ setPosition(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column prop="account" :label="$t('eventlog.user.account')" />
        <el-table-column :label="$t('public.details')">
          <template #default="scope">
            <el-icon :color="scope.row.params ? '#409Eff' : ''" @click="onParams(scope.row)">
              <Document />
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column prop="path" :label="$t('eventlog.user.event')" />
        <el-table-column :label="$t('date.recordingTime')">
          <template #default="scope">
            {{ getPlevel.gettime(scope.row.create_time, 3) }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <PageNum :total="data.total" :page="data.info" @exposeData="current" @fraction="fraction" />
    </div>
    <exports :dialogVisible="dialogExport" @close="dialogExport = false" />
    <!-- 详情 -->
    <el-dialog v-model="isParams" :title="$t('public.details')" center width="800" destroy-on-close @close="isParams = false" append-to-body>
      <p v-for="(item, index) in paramsList" class="text-left">
        <span>{{ index }}：</span>
        <span>{{ paramsList[index] }}</span>
      </p>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import TopInfo from "@/components/TopInfo/index.vue";
import Search from "@/components/Search/index.vue";
import PageNum from "@/components/PageNum/index.vue";
import getPlevel from "@/utils/level";
import { manageLogList, exportAul } from "@/api/eventlog";
import { ElMessage, ElMessageBox } from "element-plus";
import exports from '@/components/export.vue';
import { onMounted } from 'vue'
import { setLastmonth, setThismonth } from '@/utils/index'
const dialogExport = ref(false)
let paramsList = ref([])
const isParams = ref(false)
let data = reactive({
  mtloading: false, // 加载
  lookup: [
    // 筛选栏
    { title: $t('eventlog.user.userName'), type: "input", value: "", key: "nickname" },
    { title: $t('date.recordingTime'), type: "time", value: "", key: "time" },
  ],
  list: [], // 列表信息
  info: {
    // 筛选数据
    create_time: "",
    nickname: "",
    manager_id: null,
    page: 1,
    pageNum: 15,
  },
  total: 0, // 总条数
});
let onParams = (row) => {
  if (row.params) {
    isParams.value = true
    paramsList.value = row.params
  }
}
onMounted(() => {
  let pay_time = ''
  let dates = [];
  dates[0] = setLastmonth()
  dates[1] = setThismonth()
  data.lookup[1].value = dates
  pay_time = setLastmonth() + ' ' + '00:00:00' + '~' + setThismonth() + ' ' + '23:59:59'
  getlist(pay_time)
})
// 导出
let getExport = () => {
  let obj = {
    nickname: data.info.nickname,
    create_time: data.info.create_time
  }
  ElMessageBox.confirm($t('message.exportExcel')).then(res => {
    exportAul(obj).then(res => {
      if (res.state == 200) {
        dialogExport.value = true
        return
      }
      ElMessage({
        message: $t('message.networkFailed'),
        type: 'error'
      })
    }).catch(err => {
      console.log(err)
    })
  })
}
let setPosition = (row) => {
  if (row.position == 1) {
    row.positionCn = $t('eventlog.user.backend')
  }
  if (row.position == 2) {
    row.positionCn = $t('eventlog.user.terminal')
  }
  if (row.position == 3) {
    row.positionCn = $t('eventlog.user.Mobterminal')
  }
  return row.positionCn
}
// 获取列表信息
let getlist = (e) => {
  if (e) {
    data.info.create_time = e
  }
  data.mtloading = true
  data.info.manager_id = Number(data.info.manager_id)
  manageLogList(data.info)
    .then((res) => {
      data.mtloading = false
      if (res.state == 200) {
        data.list = res.data.data;
        data.total = res.data.total
      }
    })
    .catch((err) => { });
};

// 查询参数回调
let inves = (e) => {
  data.info.create_time = ''
  for (let key in e) {
    if (key != 'time') {
      data.info[key] = e[key]
    }
  }
  if (e.time != '') {
    data.info.create_time = e.time[0] + ' ' + '00:00:00' + '~' + e.time[1] + ' ' + '23:59:59'
  }
  data.info.page = 1;
  data.info.pageNum = 15;
  getlist();
};

// 页数回调
let current = (e) => {
  data.info.page = e;
  getlist();
};

// 条数回调
let fraction = (e) => {
  data.info.pageNum = e;
  getlist();
};
getlist();
</script>
